<template>
    <div class="MyDormitory">
        <!--        面包导航-->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>寝室管理</el-breadcrumb-item>
            <el-breadcrumb-item>我的宿舍</el-breadcrumb-item>
        </el-breadcrumb>
        <!--        卡片-->
        <el-card class="box-card">

            <el-descriptions class="margin-top" title="我的信息" :column="3" >
                <template slot="extra">
                    <el-button type="primary" @click="maintenanceRel">报修</el-button>
                    <el-button type="primary" @click="applause">申请</el-button>
                    <el-button type="primary" @click="getSignList">查寝记录</el-button>
                </template>
                <el-descriptions-item label="用户名">{{userInfo.name}}</el-descriptions-item>
                <el-descriptions-item label="楼栋名字">{{userInfo.bname}}</el-descriptions-item>
                <el-descriptions-item label="寝室名字">{{userInfo.qname}}</el-descriptions-item>
                <el-descriptions-item label="备注">
                    <el-tag >学校</el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="类型">{{userInfo.type}}</el-descriptions-item>
            </el-descriptions>
            <!--            表格区域-->
            <el-table :data="goodsList" border stripe>
                <el-table-column type="index"></el-table-column>
                <el-table-column label="物品名字" prop="iname"></el-table-column>
                <el-table-column label="数量" prop="number"></el-table-column>
            </el-table>
        </el-card>
        <!--        报修-->
        <el-dialog
                title="物品保修"
                :visible.sync="maintenance"
                width="50%" @close="book"
        >
            <el-form :model="repairInfo" :rules="repairInfoRul" ref="repairInfoRel" label-width="100px" class="demo-ruleForm">
                <el-form-item label="维修物品" prop="gid">
                    <el-select v-model="repairInfo.gid" placeholder="请选择" clearable>
                        <el-option
                                v-for="item in goodsList"
                                :key="item.id"
                                :label="item.iname"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
            <el-form-item label="描述" prop="note">
                <el-input type="textarea" v-model="repairInfo.describe"></el-input><br>
                <el-upload
                        :action="upUrl"
                        :on-preview="handlePreview"
                        :on-remove="handleRemove"
                        :on-success="handleSuccess"
                        list-type="picture" :headers="headerU">
                    <el-button size="small" type="primary">点击上传</el-button>
                </el-upload>
            </el-form-item>

<!--                <el-upload-->
<!--                        class="upload-demo"-->
<!--                        name="file"-->
<!--                        :action="upUrl"-->
<!--                        :on-preview="handlePreview"-->
<!--                        :on-remove="handleRemove"-->
<!--                        :before-remove="beforeRemove"-->
<!--                        multiple-->
<!--                        :limit="9"-->
<!--                        :on-success="handleSuccess"-->
<!--                        :on-exceed="handleExceed"-->
<!--                        :headers="headerU"-->
<!--                >-->
<!--                    <el-button size="small" type="primary">点击上传</el-button>-->
<!--                    <div slot="tip" class="el-upload__tip">-->
<!--                        只能上传jpg/png文件，且不超过5MB-->
<!--                    </div>-->
<!--                </el-upload>-->
            </el-form>
            <span slot="footer" class="dialog-footer">
    <el-button @click="maintenance = false">取 消</el-button>
    <el-button type="primary" @click="insertMain">确 定</el-button>
  </span>
        </el-dialog>
        <!--        申请-->
        <el-dialog
                title="申请"
                :visible.sync="apply"
                width="50%" @close="book"
        >
            <el-form :model="userApply" :rules="applyRul" ref="repairInfoRel" label-width="100px" class="demo-ruleForm">
                <el-form-item label="申请类型" prop="gid">
                    <el-select v-model="userApply.scode" placeholder="请选择" clearable>
                        <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="原因描述" prop="note">
                    <el-input type="textarea" v-model="userApply.note"></el-input><br>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
    <el-button @click="apply = false">取 消</el-button>
    <el-button type="primary" @click="addAooly">确 定</el-button>
  </span>
        </el-dialog>
        <!--        查寝记录-->
        <el-dialog
                title="申请"
                :visible.sync="look"
                width="60%" @close="book"
        >
            <el-table :data="signList" border>
                <el-table-column type="index"></el-table-column>
                <el-table-column label="楼栋名字" prop="bname"></el-table-column>
                <el-table-column label="寝室名字" prop="qname"></el-table-column>
                <el-table-column label="分数" prop="score"></el-table-column>
                <el-table-column label="备注" prop="note"></el-table-column>
                <el-table-column label="检查周次" prop="mdata"></el-table-column>
                <el-table-column label="检查时间" prop="createDate"></el-table-column>
<!--                <el-table-column label="记录人" prop="name"></el-table-column>-->
            </el-table>
            <!--                分页-->
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="queryInfo.page"
                    :page-sizes="[5,10,20,50]"
                    :page-size="queryInfo.size"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>

            <span slot="footer" class="dialog-footer">
    <el-button @click="look = false">取 消</el-button>
    <el-button type="primary" @click="look = false">确 定</el-button>
  </span>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "MyDormitory",
        data(){
            return{
                signList: [],
                //物品列表
                goodsList: [],
                userInfo: {
                    name: '',
                    qname: '',
                    bname: '',
                    type: ''
                },
                userApply: {
                    uid: '',
                    note: '',
                    scode: '',
                },
                options: [{
                    value: '0',
                    label: '换寝'
                }, {
                    value: '1',
                    label: '请假'
                }],
                upUrl: 'http://localhost:8080/uploadImage',
                headerU: {
                    Authorization: window.sessionStorage.getItem('token')
                },
                goods: '',
                //保修框显示
                maintenance: false,
                //申请框显示
                apply: false,
                //
                look: false,
                queryInfo:{
                    page: 1,
                    size: 10,
                },
                //报修信息
                repairInfo:{
                    gid: '',
                    describe: '',
                    uid: '',
                    imgurl: ''
                },
                //验证
                repairInfoRul:{
                    note:[
                        { required: true,message: '请描述情况',trigger: 'blur'}
                    ],
                    gid:[
                        { required: true,message: '请选择学院',trigger: 'change'}
                    ]
                },
                applyRul:{
                    note:[
                        { required: true,message: '请描述情况',trigger: 'blur'}
                    ],
                    scode:[
                        { required: true,message: '请选择学院',trigger: 'change'}
                    ]
                },
            }
        },
        created() {
            this.getMyGoods()
        },
        methods:{
            async getSignList(){
                this.look = true
                this.queryInfo.uid = window.sessionStorage.getItem('id')
                const {data: res} = await this.$http.get('score/getAllScore',{
                    params: this.queryInfo
                })
                if(res.code !== 200) return this.$message.error(res.message)
                this.signList = res.data.data
                this.total = res.data.total
            },
            async getMyGoods(){
                const {data: res} = await this.$http.get('Departments/getAllGoodsByid',{
                    params: {
                        id: window.sessionStorage.getItem('id')
                    }
                })
                if(res.code != 200) return this.$message.error(res.message)
                this.goodsList = res.data.data
                this.userInfo = res.data
                this.userInfo.name = window.sessionStorage.getItem('name')
                if(res.data.type ===1){
                    this.userInfo.type = '六人间'
                }else {
                    this.userInfo.type = '四人间'
                }
            },
            //监听pagesize的改变
            handleSizeChange(newSize){
                this.queryInfo.size = newSize
                this.getSignList()
            },
            //页码值改变
            handleCurrentChange(newPage){
                this.queryInfo.page = newPage
                this.getSignList()
            },
            //保修按钮
            maintenanceRel(){
                this.maintenance = true
            },
            //申请按钮
            applause(){
              this.apply = true;
            },
            //添加报修信息
            async insertMain(){
                this.repairInfo.uid = window.sessionStorage.getItem('id')
               const {data: res} = await this.$http.post('Departments/insertMaintenanceDto',this.repairInfo)
                if(res.code !==0) return this.$message.error(res.message)
                this.$message.success(res.message)
                this.repairInfo.describe = ''
                this.maintenance = false
            },
            //添加申请记录
            async addAooly(){
                this.userApply.uid = window.sessionStorage.getItem('id')
                const {data: res} = await this.$http.post('Sign/addApply',this.userApply)
                if(res.code !==0) return this.$message.error(res.message)
                this.$message.success(res.message)
                this.apply = false
            },
            //关闭框
            book(){
                this.$refs.repairInfoRel.resetFields()
            },
//成功返回方法
            handleSuccess(res, file) {
                this.repairInfo.imgurl = res
                console.log(res);
            },
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            handlePreview(file) {
                console.log(file);
            },
            handleExceed(files, fileList) {
                this.$message.warning(
                    `请勿频繁上传图片操作，您已经选择 ${files.length} 个文件，真的需要重新上传，请刷新页面`
                );
            },
            beforeRemove(file, fileList) {
                return this.$confirm(`确定移除 ${file.name}？`);
            },
        }
    }
</script>

<style scoped>

</style>